<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <!-- 
        css3弹性盒模型 flex flexbox 伸缩布局盒模型

        给伸缩容器 添加display:flex;
            float clear (vercital-align)无效
            注意：display:flex不能继承，只能添加在父元素上
        
          flex-direction:伸缩流的方向：默认row 从左往右（水平）  row-reverse 从右往左   column 从上往下（垂直）  column-reverse 从下往上 
        flex-wrap:伸缩换行  默认值nowrap 不换行 wrap 换行（用的最多）（子元素的宽度高度相加大于父元素的宽度高度，wrap才会生效，如果没有超父元素的宽度，wrap就无效）
             wrap-reverse 换行反向
                主轴是水平时，上下反向
                主轴是垂直时，左右反向

         flex-flow是flex-direction和 flex-wrap的简写，只有一个flex-direction或者只有flex-wrap都可以进行简写，两个一起也可以简写，只不过要加空格隔开
     -->
     <style>
         .all{
             width: 100%; height:260px;
             background:#ccc; 
             display: flex;
             /* flex-direction: column;
             flex-wrap: wrap; */
             flex-flow: column;
         }
         .all div{
           width:50%;  
           height:130px;
           font-size: 40px;
  
        
         }
         .all>div:nth-child(1){
             background-color: red;
         }
         .all>div:nth-child(2){
             background-color: green;
         }
         .all>div:nth-child(3){
             background-color: blue;
         }
     </style>
</head>
<body>
    <div class="all">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>